<script setup lang="ts">
import { ref } from "@vue/runtime-core"
import Toast from "vant/lib/toast";
import 'vant/es/toast/style';
import { useRouter } from "vue-router";

const name = ref('')
const password = ref('')
const st = ref('false')
const router = useRouter()

const handlelogin = () => {
  if (name.value === localStorage['name'] && password.value === localStorage['password']) {
    st.value = 'true'
    Toast('登录成功')
    localStorage.setItem('s', st.value)
    router.push({ path: '/my' })
  } else if (name.value === '') {
    Toast('用户名不为空');
  } else if (password.value === '') {
    Toast('密码不为空');
  } else {
    Toast('账号不存在，请注册后登录');
  }
}

const handleregister = () => {
  router.replace('/register')
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handlesave = () => {
  st.value = 'true'
  localStorage.setItem('s', st.value)
}

</script>




<template>
  <div id="background">
    <div class="container">
      <div class="log">Login</div>
      <form action="">
        <div class="form">
          <div class="item">
            <label>用户名：</label>
            <div>
              <input type="text" name="username" v-model.trim="name" placeholder="请输入用户名" />
            </div>

            <!-- v-model把输入的值传输给name变量 -->
            <br />
          </div>
          <div class="item">
            <label>密码：</label>
            <div>
              <input type="password" name="password" v-model.trim="password" placeholder="请输入密码" />
            </div>
            <br />
          </div>
        </div>
      </form>
      <div class="but-box">
        <div class="button" @click.prevent="handlelogin">登录</div>
        <!-- <el-button class="button" round type="submit">登录</el-button> -->
        <!-- v-on点击按钮触发handlelogin方法 -->
        <div class="button" @click.prevent="handleregister">注册</div>
        <!-- <el-button class="button" round @click.prevent="handleregister">注册</el-button> -->
        <!-- <el-button class="button" round>忘记密码</el-button> -->
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>



<style lang="scss" scoped>
#background {
  width: 100%;
  height: 100%;
  /* background: url("../assets/bg2.jpg"); */
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  user-select: none;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}

.container {
  width: 94vw;
  height: 300px;
  text-align: center;
  border-radius: 20px;
  margin-top: 10px;
  padding-top: 20px;
  background: #fff;
  margin: 0 auto;
  margin-top: 150px;
}

.log {
  margin-bottom: 25px;
  font-size: 33px;
}

.container h1 {
  color: aliceblue;
  margin-left: 20px;
}

.item {
  margin-bottom: 10px;
  font-size: 20px;
  text-align: left;
  display: flex;
  align-items: center;
}

.item label {
  float: left;
  width: 5em;
  margin-right: 1em;
  text-align: right;
}

input {
  margin-left: -5px;
  padding: 4px;
  border: none;
  outline: none;
  font: normal 13px/100% Verdana, Tahoma, sans-serif;
  width: 200px;
  height: 23px;
  display: block;
  width: 100%;
  border: 0;
  padding: 10px;
  font-size: 15px;
  outline: none;
}

.but-box {
  display: flex;
  flex-direction: row;
  justify-content: center;

  .button {
    position: relative;
    height: 33px;
    width: 100px;
    border-radius: 10px;
    margin-top: 18px;
    box-shadow: none;
    margin-right: 10px;
    text-align: center;
    padding: 10px;
    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    color: #fff;
  }
}



.keep input {
  width: 15px;
  height: 15px;
  margin-top: 7px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
